Move Javascript Code to Different Event
Description
This option provides an easy means of automatically moving javascript from one event to another; without having to redefine javascript actions or code inside a control. For example, if you create a button that fires a javascript action when it is clicked you can use this option to make that action fire when the button is double clicked instead.
Move Javascript Code from One Event to Another
In the UX Builder on the UX Controls page open the 'Other Controls' menu. Click on the [Static Text] option to add a static text control to the component.
In the properties list on the right under 'Static Text Properties' section set the 'Static text' property to be the following:
<div id="mydiv"></div>
In the Other Controls menu click on the [Button] option to add a button to the component.
Highlight the button in the controls tree. In the properties list scroll down to the 'Javascript - (Touch, Mouse, Pointer Events)' section and click the [...] button next to the 'click' property.
In the 'Edit Click Event' dialog select the 'Action Javascript' radio button and click the 'Add New Action' button.
Type 'fade' into the 'Filter list', select the 'Fade Out Message' action, and click OK.
In the action's properties list set the 'Place message where' property to be 'DIV'
In the 'Div id' property type 'mydiv', the id of the div in the static text control. Click OK, OK, and Save.
Run the component in Live Preview. Click on the button and a message should appear and fade out inside the static text div.
Go back to the Design pane. On the UX Controls page highlight the button in the controls tree.
Click the 'Menu' dropdown in the toolbar and select the 'Move Javascript Code to Different Event' option.
In the 'Move Code' dialog's 'Source' list highlight the 'click (abstract)' event. In the 'Target' list highlight the 'dblClick (abstract)' event.
Click 'OK - Move Code From Source Event to Target Event'.
Run the component in Live Preview. When you try clicking on the button nothing will happen. Double click on the button and the fade out message should appear and fade out.
